<template>
  <div id="login">
    <el-form id="form" :rules="rules"
             ref="adminUser"
             :model="adminUser"
    ><div v-loading="loading"
          element-loading-text="登录中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)">
        <h2 style="color:#333;">千城百行后台管理系统</h2>
        <el-form-item prop="adminName">
        <el-input autofocus prop="adminName" validate-event maxlength="10" prefix-icon="el-icon-user-solid" v-model="adminUser.adminName" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item prop="passWord">
        <el-input prefix-icon="el-icon-unlock" maxlength="16" type="password" show-passWord v-model="adminUser.passWord" placeholder="请输入密码"></el-input>
        </el-form-item>
          <el-form-item prop="captcha">
          <el-input prop="captcha" style="width: 50%"  prefix-icon="el-icon-info" v-model="adminUser.captcha" placeholder="输入验证码"></el-input>
          <captcha ref="captcha" style="display:inline-block;width:50%"></captcha>
          </el-form-item>
      <el-form-item prop="rememberMe" style="margin-top:-20px;">
        <el-checkbox v-model="adminUser.rememberMe" label="记住我"></el-checkbox>
      </el-form-item>
        <el-button @click="submitForm" style="width: 100%" type="primary">登录</el-button>
    </div>
    </el-form>
  </div>
</template>

<script>
import captcha from "../../components/common/Captcha";
import {encrypt} from "@/untils/jsencrypt";
import {decrypt} from "@/untils/jsencrypt";
import Cookies from "js-cookie";
export default {
  data() {
    return {
      adminUser: {
        adminName: "",
        passWord: "",
        captcha: "",
        rememberMe:false
      },
      rules: {
        adminName: [{required: true, message: '请输入用户名', trigger: 'change'}],
        passWord: [{required: true, message: '请输入密码', trigger: 'change'}],
        captcha: [{required: true, message: '请输入验证码', trigger: 'change'}]
      },
      loading:false

    };
  },
  components: {
    captcha
  },
  created() {
    this.getCookie();
  },
  methods: {
    getCookie() {
      const adminName = Cookies.get("adminName");
      const passWord = Cookies.get("passWord");
      const rememberMe = Cookies.get('rememberMe');
      this.adminUser = {
        adminName: adminName === undefined ? this.adminUser.adminName : adminName,
        passWord: adminName === undefined ? this.adminUser.passWord : decrypt(passWord),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      };
    },
    submitForm() {
      this.$refs.adminUser.validate((valid)=>{
        this.loading=true;
        if (this.adminUser.rememberMe) {
          Cookies.set("adminName", this.adminUser.adminName, {expires: 30});
          Cookies.set("passWord", encrypt(this.adminUser.passWord), {expires: 30});
          Cookies.set('rememberMe', this.adminUser.rememberMe, {expires: 30});
        } else {
          Cookies.remove("adminName");
          Cookies.remove("passWord");
          Cookies.remove('rememberMe');
        }
        if (valid){
          this.$store
              .dispatch("user/login", this.adminUser)
              .then((res) => {
                if (res==undefined){
                  this.$refs.captcha.refresh()
                }
              })
              .catch(err => {
                console.log(err);
              });
        } else {
          return false;
        }
        this.loading=false;
      })
    }
  }
};
</script>

<style lang="stylus" scoped>

#login
  width 100%
  height 100vh
  background-color rgb(41,52,68)
  display flex
  justify-content center
  align-items center

#form
  height 420px
  width 420px
  background-color white
  border-radius 5%
  box-sizing border-box
  padding 20px 45px
  display flex
  align-items  center
  flex-wrap wrap
  flex-direction column
  & h1
    cursor pointer

.el-form-item{
  width:100%;
}

</style>